<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>


<div id="app">

    <p><input type="text" v-model="memo">
        <button @click="addMemo">添加备忘录</button>
    </p>
    <h3>备忘录列表</h3>
    <span v-show="memos.length==0">备忘录列表为空,请添加备忘录</span>
    <ul>
        <li v-for="(info,index) in memos" :key="index">{{ info }}
            <button @click="delMemo(index)">删除</button>
        </li>
    </ul>
    <p>备忘录一共 {{memos.length}} 条</p>
    <p>
        <button @click="clearMemos">清空备忘录</button>
    </p>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            memo: '',
            memos: [  //  备忘录列表
                '这是第一条备忘录',
                '这是第二条备忘录'
            ]
        },
        methods: {
            addMemo() {
                if (this.memo.trim().length == 0) {
                    alert("请填写备忘录")
                    this.memo = ''
                    return
                }
                this.memos.push(this.memo.trim())
                //     备忘录添加成功 清空input
                this.memo = ''
            },
            clearMemos(){   //  清空备忘录
                this.memos = []
            },
            delMemo(index){  // 删除当前备忘录
                //  splice(startIndex,delNumber)   从哪个索引位开始删除 删除几个
                this.memos.splice(index,1)
            }
        }
    })
</script>
</body>
</html>